{% extends 'layout.html' %}
{% block contect %}
<canvas id="pieChart" style="max-height: 400px;"></canvas>
<script>
document.addEventListener("DOMContentLoaded", () => {
  const labels = [{% for label in pielabel %}{{ label }}{% if not loop.last %}, {% endif %}{% endfor %}];
  const data = [{% for datum in piedata %}{{ datum }}{% if not loop.last %}, {% endif %}{% endfor %}];

  new Chart(document.querySelector('#pieChart'), {
    type: 'pie',
    data: {
      labels: labels,
      datasets: [{
        label: 'My First Dataset',
        data: data,
        backgroundColor: [
          'rgb(255, 99, 132)',
          'rgb(54, 162, 235)',
          'rgb(255, 205, 86)',
          'rgb(75, 192, 192)',
          'rgb(153, 102, 255)',
        ],
        hoverOffset: 4
      }]
    }
  });
});
</script>
{% endblock %}
<!--data: [300, 50, 100],-->
<!--labels: [-->
<!--                'Red',-->
<!--                'Blue',-->
<!--                'Yellow'-->
<!--              ],-->
<!--  const data = [{% for datum in piedata %}{{ datum }}{% if not loop.last %}, {% endif %}{% endfor %}];-->